<template>
  <div class="add-work-table-container">
    <BaseDialog :config="dialogConfig" :callback="dialogCallback">
      <SearchFilter :item="nameConfig" :tableQuery="createdItem" />
      <SearchFilter :item="databaseIdConfig" :tableQuery="createdItem" />
      <SearchFilter :item="sqlConfig" :tableQuery="createdItem" />

      <div class="input-container" :style="{ 'justify-content': 'normal' }">
        <span class="filter-txt">
          测试：
        </span>

        <el-button size="mini" :loading="resultItem.btnLoading" @click="test"
          >运行</el-button
        >
      </div>

      <SearchFilter :item="resultConfig" :tableQuery="resultItem" />
    </BaseDialog>
  </div>
</template>

<script>
import BaseDialog from '@/views/report/Components/Dialog/index'
import SearchFilter from '@/views/report/Components/Search/filter'
import * as database from '@/api/report/database'
import * as workTable from '@/api/report/workTable'
const defaultCreate = {
  name: '',
  database_id: '',
  sql: ''
}

export default {
  data() {
    return {
      dialogConfig: {
        title: '创建工作表',
        show: true,
        size: 'large'
      },

      nameConfig: {
        type: 'input',
        label: '名称',
        field: 'name',
        inputBox: {
          'justify-content': 'normal'
        }
      },
      databaseIdConfig: {
        type: 'select',
        label: '数据源',
        field: 'database_id',
        inputBox: {
          'justify-content': 'normal'
        },
        style: {
          width: '260px'
        },
        itemDataProps: {
          label: 'name',
          value: 'database_id'
        },
        data: []
      },
      sqlConfig: {
        type: 'textarea',
        label: 'SQL',
        field: 'sql',
        inputBox: {
          'justify-content': 'normal'
        },
        style: {
          width: '100%'
        },
        rows: 10
      },
      resultConfig: {
        type: 'textarea',
        label: '结果',
        field: 'result',
        placeholder: '\n',
        readonly: true,
        inputBox: {
          'justify-content': 'normal'
        },
        style: {
          width: '100%'
        },
        rows: 5
      },

      createdItem: Object.assign({}, defaultCreate),
      resultItem: {
        btnLoading: false,
        result: '',
        error: true
      }
    }
  },
  props: {
    param: {
      type: Object
    }
  },
  created() {
    this.getDatabaseList()
  },
  mounted() {},
  computed: {},
  watch: {},
  components: {
    BaseDialog,
    SearchFilter
  },
  methods: {
    close() {
      this.$emit('close')
    },

    validate() {
      let { name, database_id, sql } = this.createdItem
      if (!name) {
        return this.$message.error('名称必填')
      }
      if (!database_id) {
        return this.$message.error('数据源必选')
      }
      if (!sql) {
        return this.$message.error('SQL必填')
      }
      return true
    },

    dialogCallback(action, done) {
      if (action === 'Confirm') {
        if (this.validate() !== true) return
        this.create(done)
      } else {
        this.close()
      }
    },

    // 获取数据源
    getDatabaseList() {
      database
        .list({})
        .then(({ data }) => {
          data = data || []
          Object.assign(this.databaseIdConfig, {
            data: data
          })

          // if (!data.length) return;
          // this.getDatabaseTables(data[0].database_id)
        })
        .catch(error => {
          this.$message.error(error)
        })
    },

    // 测试运行
    test(done) {
      if (this.validate() !== true) return

      this.resultItem.btnLoading = true
      this.resultItem.result = ''
      this.resultItem.error = false

      workTable
        .sqlTest(this.createdItem)
        .then(response => {
          this.resultItem.result = response.data
          this.resultItem.btnLoading = false
        })
        .catch(error => {
          this.$message.error(error)
          this.resultItem.result = error
          this.resultItem.btnLoading = false
          this.resultItem.error = true
        })
    },

    // 创建
    create(done) {
      if (this.resultItem.error) {
        return this.$message.error('未测试SQL或有错误发生')
      }
      workTable
        .sqlCreate(this.createdItem)
        .then(response => {
          done()
          this.close()
        })
        .catch(error => {
          this.$message.error(error)
        })
    }
  }
}
</script>

<style lang="scss"></style>
